<template>
  <fieldset>
    <legend>编辑</legend>
    <ul>
      <li v-for="(v, k, i) in info" :key="i">
        <b>{{ k }}：</b>
        <input
          ref="ipt"
          type="text"
          v-if="isEdit && i == inde"
          @blur="quitEdit(k)"
          @keydown.enter="quitEdit(k)"
          v-model="val"
        />
        <span v-else @dblclick="edit(v, i)">{{ v }}</span>
      </li>
    </ul>
  </fieldset>
</template>
<script>
export default {
  data() {
    return {
      inde: "",
      val: "",
      isEdit: false,
      info: {
        姓名: "夏洛",
        年龄: 18,
        身高: "180cm",
        爱好: "秋雅",
      },
    };
  },
  methods: {
    edit(v, i) {
      this.isEdit = true;
      this.val = v;
      this.inde = i;
      this.$nextTick(() => {
        this.$refs.ipt[0].focus();
      });
    },
    quitEdit(k) {
      this.isEdit = false;
      this.info[k] = this.val;
    },
  },
};
</script>
<style scoped>
li {
  list-style: none;
  margin: 5px 0;
}
b {
  display: inline-block;
  height: 30px;
  line-height: 30px;
}
span {
  display: inline-block;
  width: 150px;
  height: 30px;
  vertical-align: bottom;
  text-align: center;
  border-bottom: 1px solid #000;
  line-height: 30px;
  font-size: 16px;
}
input {
  width: 150px;
  height: 28px;
  border: none;
  outline: 0;
  text-align: center;
  line-height: 28px;
  border-bottom: 1px solid #000;
  font-size: 16px;
}
</style>
